<template>
  <el-card>
    <h1>{{ id ? "编辑" : "创建" }}比赛项目</h1>
      <el-button
      class="btntop"
      @click="
        ispage = 1;
        iscolor = 1;
      "
      :type="iscolor === 1 ? 'primary' : ''"
    >
      单人项目
    </el-button>
    <el-button
    class="btntop"
      @click="
        ispage = 2;
        iscolor = 2;
      "
      :type="iscolor === 2 ? 'primary' : ''"
    >
      团体项目
    </el-button>
    <el-form
    v-if="ispage == 1"
      :model="form"
      label-width="100px"
      ref="formRef"
      :rules="formRules"
    >
      <el-form-item
        label="比赛类型"
        prop="type"
      >
        <el-select v-model="form.parent">
          <el-option
            v-for="items in categoryList"
            :key="items._id"
            :label="items.name"
            :value="items._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="项目名称"
        prop="name"
      >
        <el-input
          class="fiw"
          v-model="form.name"
        />
      </el-form-item>
      <el-form-item
        label="项目编号"
        prop="num"
      >
        <el-input
          class="fiw"
          v-model="form.num"
        />
      </el-form-item>
      <el-form-item
        label="比赛地点"
        prop="place"
      >
        <el-input
          class="fiw"
          v-model="form.place"
        />
      </el-form-item>
      <el-form-item
        label="比赛时间"
        prop="time"
      >
        <el-date-picker
          class="fiw"
          v-model="form.time"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
          default-time="12:00:00"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="save()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  props: {
    id: {},
  },
  data() {
    return {
       ispage: 1,
      iscolor: 1,
      form: {
        stuJf:0
      },
      categoryList: [],
      formRules: {
        type: [{ required: true, message: "不能为空", trigger: "blur" }],
        parent: [{ required: true, message: "不能为空", trigger: "blur" }],
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        num: [{ required: true, message: "不能为空", trigger: "blur" }],
        place: [{ required: true, message: "不能为空", trigger: "blur" }],
        time: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.id && this.fetch();
    this.getCastegory();
  },

  methods: {
    async fetch() {
      const rs = await this.$http.get(`rest/sport_items/${this.id}`);
      this.form = rs.data;
      console.log(this);
    },
    async getCastegory() {
      const rs = await this.$http.get("rest/categories");
      this.categoryList = rs.data;
      console.log("比赛类型");
      console.log(rs.data);
    },
    async save() {
      console.log(this.form);
      let rs;
      if (this.id) {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) return;
          rs = await this.$http.put(`rest/sport_items/${this.id}`, this.form);
          if (rs.status !== 200) return;
          this.$message({
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/sportItem/list" });
        });
      } else {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) return;
          rs = await this.$http.post("rest/sport_items", this.form);
          if (rs.status !== 200) return;
          this.$message({
            message: "成功",
            type: "success",
          });
          this.$router.push({ path: "/sportItem/list" });
        });
      }
      // if (rs.status !== 200) return;
      // this.$message({
      //   message: "成功",
      //   type: "success",
      // });
      // this.$router.push({ path: "/class/list" });
    },
  },
};
</script>

<style lang="scss" scoped>
.fiw {
  width: 200px;
}
.el-form {
  margin-top: 20px;
}
.btntop{
  margin-top: 30px;
  margin-left: 20px;
}

</style>
